<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const images = [
  { id: 1, src: new URL('../img/1.png', import.meta.url).href, title: '图片1' },
  { id: 2, src: new URL('../img/2.png', import.meta.url).href, title: '图片2' }
];

const viewImage = (id) => {
  router.push(`/image/${id}`);
};
</script>

<template>
  <div class="gallery-container">
    <h1>图片展示</h1>
    <div class="image-grid">
      <div v-for="image in images" :key="image.id" class="image-item" @click="viewImage(image.id)">
        <img :src="image.src" :alt="image.title">
        <p>{{ image.title }}</p>
      </div>
    </div>
  </div>
</template>

<style scoped>
.gallery-container {
  padding: 2rem;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.image-item {
  cursor: pointer;
  transition: transform 0.3s;
}

.image-item:hover {
  transform: scale(1.05);
}

.image-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.image-item p {
  text-align: center;
  margin-top: 1rem;
}
</style>